<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
		<script>
			$(function(){
				$("#submit").click(function(){
					//jquery ->dom
					var n=$("[name='nickname']").get(0);
					//alert(n.value);
					if(n.validity.valueMissing==true)
						n.setCustomValidity("昵称不能不填");
					else if(n.validity.patternMismatch==true){
						n.setCustomValidity("请输入3-16个字符");
					}else{
						n.setCustomValidity("");
					}
					
					var card=$("[name='idcard']")[0];
					if(card.validity.valueMissing)
						card.setCustomValidity("身份证号必须提供");
					else if(card.validity.patternMismatch){
						card.setCustomValidity("身份证号是18位数字，最后一位可能是X");
					}else{
						card.setCustomValidity("");
					}
				});
			});
		</script>
	</head>
	<body>
		<form action="index1.html" method="get" id="regForm">
			<h1>表单验证</h1>
			<p>
				<label>昵称</label><input type="text" name="nickname" placeholder="你的昵称，你的好友能看到" required="required" pattern="\w{3,16}"/><span></span>
			</p>
			<p>
				<label>身份证</label><input type="text" name="idcard" placeholder="你的身份证号" required="required" pattern="\d{17}(\d|X|x)"/><span></span>
			</p>
			<p>
				输入密码:<input name="pass" type="password" id="pwd" class="inputs" /><span></span>
			</p>
			<p>
				
			再次输入密码:<input type="password" id="repass" name="repass"/>
			</p>
			<p>
				您的Email:<input type="email" name="email" class="inputs" id="email"/><span></span><br />
			
			</p>
			<p>
				<label>手机号</label>
				<input type="tel" name="telephone" id="tel" /><span></span>
			</p>
			<p>
				<label>喜欢什么样的语言（至少选择两种）</label>
				<input type="checkbox" name="like" value="java"/>java
				<input type="checkbox" name="like" value="js"/>js
				<input type="checkbox" name="like" value="python"/>python
				<input type="checkbox" name="like" value="c"/>c
				<input type="checkbox" name="like" value="c#"/>c#
				<input type="checkbox" name="like" value="vb"/>vb
				<input type="checkbox" name="like" value="php"/>php
				<span></span>
			</p>
			<p>
				<label>年龄</label>
				<input type="text" name="age" id="age"/><span></span>
			</p>
			<p>
				请同意<a href="#">用户协议</a><input type="checkbox" name="greement" value="y" id="greement"/>
			</p>
			
			<input type="submit" id="submit" value="注册" name="btn" class="rbl"/>
		</form>
	</body>
</html>
